<section id="createHouse" class="ml-24 mr-24">
  <div class="imgclick"></div>

  <hl-page-header title="新建房源" title-color="#999"></hl-page-header>
  <div class="mt-15 pt-10">
    <div class="house-title mb-10">分享设置</div>
    <div class="dy-flex">
      <div class="dy-fx-1 line-height-34">
        <span class="required">*</span>
        <span class="color-999">分享标题:</span>
      </div>
      <div class="dy-fx-6">
        <input type="text" class="form-control color-666" v-model="shareTitle" />
      </div>
      <div class="dy-fx-5"></div>
    </div>
    <div class="dy-flex mt-5">
      <div class="dy-fx-1 line-height-34">
        <span class="required">*</span>
        <span class="color-999">分享简介:</span>
      </div>
      <div class="dy-fx-6">
        <textarea class="form-control color-666" rows="5" v-model="shareAbstract"></textarea>
      </div>
      <div class="dy-fx-5"></div>
    </div>
    <div class="dy-flex mt-5">
      <div class="dy-fx-1 line-height-34">
        <span class="required">*</span>
        <span class="color-999">分享主图:</span>
      </div>
      <div class="dy-fx-6">
        <div class="picbox" v-if="shareImg">
          <img :src="shareImg" class="picture">
          <span class="resetup" @click="uploadClickimg">重新上传</span>
        </div>
        <button type="button" class="btn s-btn-default" v-if="!shareImg" @click="uploadClickimg">添加图片</button>
      </div>
      <div class="dy-fx-5"></div>
    </div>
  </div>
  <div class="mt-15 pt-10">
    <div class="house-title mb-10 clearfix">推荐资源（可选）
			<span v-if="!recommendFlag" @click="recommendEvent" class="ml-24 cursor" style="color:rgba(86,94,153,1);"><span class="icon-Org-account mr-5"></span>添加资源</span>
			<span v-if="recommendFlag" @click="removeHouse" class="ml-24 cursor pull-right" style="color:rgba(86,94,153,1);"><span class="icon-Gm-delete-2 mr-5"></span>删除</span>
		</div>
    <div v-if="recommendFlag">
			<div class="dy-flex">
			    <div class="dy-fx-1 line-height-34">
			      <span class="color-999">租赁类型:</span>
			    </div>
			    <div class="dy-fx-6">
			      <div class="select-ul house-sharing-text">
							<span class="select-name br-4 box-i-shadow">整租</span>
			        <ul>
			          <li v-for="item in yxState.list" @click="setYxState(item.code)">{{item.name}}</li>
			        </ul>
			      </div>
			    </div>
			    <div class="dy-fx-5"></div>
			  </div>
			  <div class="dy-flex mt-5">
			    <div class="dy-fx-1 line-height-34">
			      <span class="color-999">推荐项目:</span>
			    </div>
			    <div class="dy-fx-6 clearfix">
			      <div class="select-ul house-sharing-text pull-left">
			        <span class="select-name br-4 box-i-shadow" ref="yxProject">请选择</span>
			        <ul>
			          <li v-for="(item, index) in projectList" @click="getProjectParams(item)">{{item.projectName}}</li>
			        </ul>
			      </div>
			      <div class="pull-left ml-24">
			        <button class="btn n-btn-primary" v-if="yxState.active == 'ER'" @click="changeProjectFlag"><span class="icon-Org-account mr-10"></span>分享单元</button>
			        <button class="btn n-btn-primary" v-if="yxState.active == 'WR'" @click="changeWpFlag"><span class="icon-Org-account mr-10"></span>分享工位</button>
			        <button class="btn n-btn-primary" @click="changeStFlag"><span class="icon-Org-account mr-10" ></span>分享车位</button>
			      </div>
			    </div>
			    <div class="dy-fx-5"></div>
			  </div>
			</div>
			<div>
			  <!-- 意向单元 -->
			  <div style="marginTop:30px;" v-if="queryUnitParams.list.length">
			    <div class="mb-10"><span style="color: white;">*</span>推荐单元:</div>
			    <div class="dy-flex gradient-color line-height-40 text-center border">
			      <div class="dy-fx-2">楼宇</div>
			      <div class="dy-fx-2">楼层</div>
			      <div class="dy-fx-2">单元</div>
			      <div class="dy-fx-1">操作</div>
			    </div>
			    <div class="dy-flex line-height-40 text-center border-b border-l" v-for="(item, index) in queryUnitParams.list" :key="index">
			      <div class="dy-fx-2 border-r">{{item.buildingName}}</div>
			      <div class="dy-fx-2 border-r">{{item.floor}}</div>
			      <div class="dy-fx-2 border-r">{{item.unitName}}</div>
			      <div class="dy-fx-1 border-r text-center">
			        <span class="icon-Gm-delete-2 color-999 cursor" @click="deleteUnit(index)"></span>
			      </div>
			    </div>
			  </div>
			  <!-- 工位 -->
			  <div style="marginTop:30px;" v-if="queryWpParams.list.length">
			    <div class="mb-10"><span style="color: white;">*</span>推荐工位:</div>
			    <div class="dy-flex gradient-color line-height-40 text-center border">
			      <div class="dy-fx-2">楼宇</div>
			      <div class="dy-fx-2">楼层</div>
			      <div class="dy-fx-2">单元</div>
			      <div class="dy-fx-2">工位数</div>
			      <div class="dy-fx-4">工位清单</div>
			    </div>
			    <div class="dy-flex line-height-40 text-center border-b border-l" v-for="(item, index) in queryWpParams.list" :key="index">
			      <div class="dy-fx-2 border-r dy-center">{{item.buildingName}}</div>
			      <div class="dy-fx-2 border-r dy-center">{{item.floor}}</div>
			      <div class="dy-fx-2 border-r dy-center">{{item.unitName}}</div>
			      <div class="dy-fx-2 border-r dy-center">{{item.children.length}}</div>
			      <div class="dy-fx-4 border-r text-left">
			        <span v-for="(item1, index1) in item.children" :key="index1" class="ml-10 inline">
			          {{item1.positionName}}
			          <span class="icon-Gm-delete-2 color-999 cursor" @click="deleteWp(index, index1, item1.positionId)"></span>
			        </span>
			      </div>
			    </div>
			  </div>
			  <!-- 车位 -->
			  <div style="marginTop:30px;" v-if="queryStParams.list.length">
			    <div class="mb-10"><span style="color: white;">*</span>推荐车位:</div>
			    <div class="dy-flex gradient-color line-height-40 text-center border">
			      <div class="dy-fx-2">楼宇</div>
			      <div class="dy-fx-2">楼层</div>
			      <div class="dy-fx-2">单元</div>
			      <div class="dy-fx-2">车位数</div>
			      <div class="dy-fx-4">车位清单</div>
			    </div>
			    <div class="dy-flex line-height-40 text-center border-b border-l" v-for="(item, index) in queryStParams.list" :key="index">
			      <div class="dy-fx-2 border-r dy-center">{{item.buildingName}}</div>
			      <div class="dy-fx-2 border-r dy-center">{{item.floor}}</div>
			      <div class="dy-fx-2 border-r dy-center">{{item.unitName}}</div>
			      <div class="dy-fx-2 border-r dy-center">{{item.children.length}}</div>
			      <div class="dy-fx-4 border-r text-left">
			        <span v-for="(item1, index1) in item.children" :key="index1" class="ml-10 inline">
			          {{item1.positionName}}
			          <span class="icon-Gm-delete-2 color-999 cursor" @click="deleteSt(index, index1, item1.positionId)"></span>
			        </span>
			      </div>
			    </div>
			  </div>
		</div>
  </div>
  <div class="mt-15 pt-10">
    <div class="house-title mb-10">内容介绍</div>
    <div class="dy-flex">
      <div class="dy-fx-1 line-height-34">
        <span class="required">*</span>
        <span class="color-999">内容标题:</span>
      </div>
      <div class="dy-fx-6">
        <input type="text" class="form-control color-666" v-model="contentTitle" />
      </div>
      <div class="dy-fx-5"></div>
    </div>
    <div class="dy-flex mt-5">
      <div class="dy-fx-1 line-height-34">
        <span class="required">*</span>
        <span class="color-999">内容详情:</span>
      </div>
      <div class="dy-fx-9">
        <div id="editor"></div>
      </div>
      <div class="dy-fx-2"></div>
    </div>
  </div>
  <div class="house-save mt-15 pt-10 border-t">
    <button class="btn n-btn-primary" @click="saveHouse">保存</button>
  </div>
  <!-- //添加意向单元 -->
  <section>
    <div class="yx-share-mark" v-show="projectParams.flag">
      <div class="yx-container br-4">
        <div class="yx-title">添加单元</div>
        <div class="yx-close icon-Gm-close" @click="changeProjectFlag"></div>
        <div class="yx-bg-f9f9f9">
          <div class="clearfix ml-10 line-height-34 pt-10">
            <div class="pull-left">选择楼宇:</div>
            <div class="pull-left ml-10">
              <div class="select-ul building pull-left">
                <span class="select-name br-4 box-i-shadow" ref="building">请选择</span>
                <ul>
                  <li v-for="(item, index) in buildingList" @click="getBuildingParams(item)">{{item.name}}</li>
                </ul>
              </div>
            </div>
            <div class="pull-left ml-10">选择楼层:</div>
            <div class="pull-left ml-10">
              <div class="select-ul floor pull-left">
                <span class="select-name br-4 box-i-shadow" ref="floor">请选择</span>
                <ul>
                  <li v-for="(item, index) in floorList" @click="getFloorParams(item)">{{item.floorName}}</li>
                </ul>
              </div>
            </div>
            <div class="pull-left ml-10">
              <button class="btn n-btn-default">查询</button>
            </div>
          </div>
          <div class="yx-content clearfix">
            <div class="pull-left line-height-34" style="width: 62px;">单元</div>
            <div class="pull-left" style="width: 701px;">
              <div class="green-block" :class="{yz_status:item.rentState === 'IR',yd_status:item.rentState === 'YD',ip_status:item.rentState === 'IP',du_status:item.rentState === 'DU',zy_status:item.rentState === 'ZY',kz_status:item.rentState === 'VA'}" v-for="(item, index) in unitList" :key="index" @click="selectedUnit(item)">
                {{item.unitName}}
                <div class="icon-Nav-contract-choice" :class="{choice: unitIds.indexOf(item.unitId) > -1, hide: !(unitIds.indexOf(item.unitId) > -1)}"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="yx-button text-center ptb-10">
          <button class="btn n-btn-primary" @click="queryUnit">确认添加</button>
        </div>
      </div>
    </div>
  </section>
  <!-- //添加意向工位 -->
  <section>
    <div class="yx-share-mark" v-show="wpflag">
      <div class="yx-container br-4">
        <div class="yx-title">添加单元</div>
        <div class="yx-close icon-Gm-close" @click="changeWpFlag"></div>
        <div class="yx-bg-f9f9f9">
          <div class="clearfix ml-10 line-height-34 pt-10">
            <div class="pull-left">选择楼宇:</div>
            <div class="pull-left ml-10">
              <div class="select-ul floor pull-left">
                <span class="select-name br-4 box-i-shadow" ref="building1">请选择</span>
                <ul>
                  <li v-for="(item, index) in buildingList" @click="getBuildingParams(item)">{{item.name}}</li>
                </ul>
              </div>
            </div>
            <div class="pull-left ml-10">选择楼层:</div>
            <div class="pull-left ml-10">
              <div class="select-ul floor pull-left">
                <span class="select-name br-4 box-i-shadow" ref="floor1">请选择</span>
                <ul>
                  <li v-for="(item, index) in floorList" @click="getFloorParams(item)">{{item.floorName}}</li>
                </ul>
              </div>
            </div>
            <div class="pull-left ml-10">选择单元:</div>
            <div class="pull-left ml-10">
              <div class="select-ul floor pull-left">
                <span class="select-name br-4 box-i-shadow" ref="unit">请选择</span>
                <ul>
                  <li v-for="(item, index) in unitList" @click="getunitParams(item)">{{item.unitName}}</li>
                </ul>
              </div>
            </div>
            <div class="pull-left ml-10">
              <button class="btn n-btn-default">查询</button>
            </div>
          </div>
          <div class="yx-content clearfix">
            <div class="pull-left line-height-34" style="width: 62px;">单元</div>
            <div class="pull-left" style="width: 701px;">
              <div class="green-block" :class="{yz_status:item.rentState === 'IR',yd_status:item.rentState === 'YD',ip_status:item.rentState === 'IP',du_status:item.rentState === 'DU',zy_status:item.rentState === 'ZY',kz_status:item.rentState === 'VA'}" v-for="(item, index) in positinList" :key="index" @click="selectWpPosition(item)">
                {{item.positionName}}
                <div class="icon-Nav-contract-choice" :class="{choice: wpIds.indexOf(item.positionId) > -1, hide: !(wpIds.indexOf(item.positionId) > -1)}"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="yx-button text-center ptb-10">
          <button class="btn n-btn-primary" @click="queryWp">确认添加</button>
        </div>
      </div>
    </div>
  </section>
  <!-- //添加意向车位 -->
  <section>
    <div class="yx-share-mark" v-show="stflag">
      <div class="yx-container br-4">
        <div class="yx-title">添加车位</div>
        <div class="yx-close icon-Gm-close" @click="changeStFlag"></div>
        <div class="yx-bg-f9f9f9">
          <div class="clearfix ml-10 line-height-34 pt-10">
            <div class="pull-left">选择楼宇:</div>
            <div class="pull-left ml-10">
              <div class="select-ul floor pull-left">
                <span class="select-name br-4 box-i-shadow" ref="building2">请选择</span>
                <ul>
                  <li v-for="(item, index) in buildingList" @click="getBuildingParams(item)">{{item.name}}</li>
                </ul>
              </div>
            </div>
            <div class="pull-left ml-10">选择楼层:</div>
            <div class="pull-left ml-10">
              <div class="select-ul floor pull-left">
                <span class="select-name br-4 box-i-shadow" ref="floor2">请选择</span>
                <ul>
                  <li v-for="(item, index) in floorList" @click="getFloorParams(item)">{{item.floorName}}</li>
                </ul>
              </div>
            </div>
            <div class="pull-left ml-10">选择单元:</div>
            <div class="pull-left ml-10">
              <div class="select-ul floor pull-left">
                <span class="select-name br-4 box-i-shadow" ref="unit1">请选择</span>
                <ul>
                  <li v-for="(item, index) in unitList" @click="getunitParams(item)">{{item.unitName}}</li>
                </ul>
              </div>
            </div>
            <div class="pull-left ml-10">
              <button class="btn n-btn-default">查询</button>
            </div>
          </div>
          <div class="yx-content clearfix">
            <div class="pull-left line-height-34" style="width: 62px;">单元</div>
            <div class="pull-left" style="width: 701px;">
              <div class="green-block" :class="{yz_status:item.rentState === 'IR',yd_status:item.rentState === 'YD',ip_status:item.rentState === 'IP',du_status:item.rentState === 'DU',zy_status:item.rentState === 'ZY',kz_status:item.rentState === 'VA'}" v-for="(item, index) in positinList" :key="index" @click="selectStPosition(item)">
                {{item.positionName}}
                <div class="icon-Nav-contract-choice" :class="{choice: stIds.indexOf(item.positionId) > -1, hide: !(stIds.indexOf(item.positionId) > -1)}"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="yx-button text-center ptb-10">
          <button class="btn n-btn-primary" @click="querySt">确认添加</button>
        </div>
      </div>
    </div>
  </section>
</section>

<style media="screen">
  .house-title {
    font-size: 14px;
    color:rgba(146,155,168,1);
  }
  .house-sharing-text {
    width: 150px;
  }
  .yx-share-mark {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
  }
  .yx-container {
    width: 800px;
    background-color: #fff;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  }
  .yx-title {
    text-align: center;
    line-height: 50px;
    height: 50px;
  }
  .building {
    width: 235px;
  }
  .floor {
    width: 105px;
  }
  .yx-bg-f9f9f9 {
    background-color: #f9f9f9;
  }
  .yx-content {
    padding: 10px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin-top: 10px;
    height: 300px;
    overflow-y: scroll;
  }
  .green-block {
    position: relative;
    float: left;
    min-width: 80px;
    max-width: 190px;
    height: 34px;
    line-height: 34px;
    margin-right: 7px;
    margin-bottom: 10px;
    padding-left: 7px;
    padding-right: 24px;
    border-radius: 4px;
    background-color: #44b549;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .choice {
    position: absolute;
    right: 6px;
    top: 8px;
    font-size: 14px;
    border-radius: 50%;
    color: #fff;
    line-height: 18px;
    text-align: center;
  }
  .yx-close {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    color: #999;
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
    cursor: pointer;
  }
  .dy-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .picbox {
    width: 110px;
    height: 110px;
    display: inline-block;
    position: relative;
  }
  .picture {
    width: 100%;
    height: 100%;
  }
  .resetup {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 28px;
    line-height: 28px;
    color: #fff;
    background: rgba(0,0,0,.5);
    text-align: center;
  }
</style>

<script src="scripts/libs/wangEditor.min.js" charset="utf-8"></script>
<script src="modules/rent/scripts/create_house.js" charset="utf-8"></script>
